<template>
  <div class="container">
    <h1 style="text-align: center">图片上传</h1>
    <div style="margin-bottom: 100px">
      <!-- 原生上传 -->
      <h3>原生上传</h3>
      <input
        type="file"
        id="box"
        name="file"
        accept="image/x-png,image/gif,image/jpeg,image/bmp"
        ref="file"
      />
      <el-button @click="handle">上传</el-button>
    </div>
    <!-- element 上传 -->
    <div class="el-upload">
      <h3>element 上传</h3>
      <el-button type="primary">图片上传</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ImgUpload',
  data () {
    return {
    }
  },
  computed: {
  },
  methods: {
    /*
     FormData 对象的使用：
        1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString
        2. 异步上传二进制文件
    */
    handle () {
      let file = this.$refs.file.files // 获取文件
      console.log('file: ', this.$refs.file, file)
      let data = new FormData()
      data.append('file', file.file) // 看那边接受的是键是什么 可能是img等
      // upload(data).then(res => console.log(res))
    }
  }
}
</script>

<style scoped>
</style>
